import React, { memo, useState, useEffect } from "react";
import { View, Text, StyleSheet, Image } from "react-native";
import { p } from "utils/pxToDp";
import { LinearGradient } from "expo-linear-gradient";
import themeStore from "stores/theme";
import YText from "components/YText";
import commonStyle from "utils/style";

const Completed = () => {
  const theme = themeStore.theme
  return (
    <LinearGradient
      colors={[theme.gradientb1, theme.gradientb2, theme.gradientcomment]}
      style={styles.box}
    >
      <View>
        <View style={[commonStyle.flexrow, commonStyle.flexrowaligncenter,commonStyle.mb20]}>
          <Image
            source={require("assets/love-todo.png")}
            style={styles.hearticon}
          />
          <YText color={theme.mainText} size={theme.f28} bold>
            共同完成
          </YText>
        </View>
        <View style={[commonStyle.flexrowcenterbetween]}>
          <YText color={theme.mainText} size={theme.f26} bold>
            一起养只猫
          </YText>
          <Image source={require("assets/boy.png")} style={styles.face} />
        </View>
        <View style={[commonStyle.mt10]}>
          <YText color={theme.mainText} size={theme.f24}>备注：什么都可以</YText>
          <YText color={theme.lightText} size={theme.f20} style={commonStyle.mt10}>2014年12月10日</YText>
        </View>
      </View>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  box: {
    marginTop: p(20),
    padding: p(25),
    borderRadius: p(25),
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: p(25),
    width:'48%',
    height:p(300)
    // paddingBottom: p(10),
  },
  hearticon: {
    width: p(40),
    height: p(40),
    marginRight: p(10),
  },
  face: {
    width: p(40),
    height: p(40),
    borderRadius: p(20),
  },
});

export default Completed;
